import React, { Component } from "react";
import { connect } from "react-redux";
import { Tabs } from "antd-mobile";
import "./Coupon.less";
import Header from "../../components/Header/Header";
import {actions,getList1,getList2,getList3} from "../../store/modules/coupon"
import { bindActionCreators } from "redux";

class Coupon extends Component {
    componentDidMount(){
        this.props.coupon.reqCoupon();
    }
  render() {
      let {list1,list2,list3,coupon:{getTime}} = this.props
    return (
      <>
        <Header title="优惠券" back></Header>
        <Tabs>
          <Tabs.Tab title="未使用" key="fruits">
            {list1.map((item) => {
              return (
                <div className="coupon_item" key={item.id}>
                  <div className="coupon_price">
                    <div className="coupon_left">
                      <p className="coupon_money">
                        &yen;<span>{item.money}</span>
                      </p>
                      <p className="coupon_limit">满{item.limit_money}可用</p>
                    </div>
                    <div className="coupon_right">
                      <p className="coupon_title">{item.title}</p>
                      <p className="coupon_time">
                        {getTime(item.begintime)}至
                        {getTime(item.endtime)}
                      </p>
                    </div>
                  </div>
                  <div className="coupon_line"></div>
                  <p className="coupon_text">使用规则：{item.description}</p>
                </div>
              );
            })}
          </Tabs.Tab>
          <Tabs.Tab title="已使用" key="vegetables">
            {list2.map((item) => {
              return (
                <div className="coupon_item" key={item.id}>
                  <div className="coupon_price">
                    <div className="coupon_left">
                      <p className="coupon_money">
                        &yen;<span>{item.money}</span>
                      </p>
                      <p className="coupon_limit">满{item.limit_money}可用</p>
                    </div>
                    <div className="coupon_right">
                      <p className="coupon_title">{item.title}</p>
                      <p className="coupon_time">
                        {getTime(item.begintime)}至
                        {getTime(item.endtime)}
                      </p>
                    </div>
                  </div>
                  <div className="coupon_line"></div>
                  <p className="coupon_text">使用规则：{item.description}</p>
                </div>
              );
            })}
          </Tabs.Tab>
          <Tabs.Tab title="已失效" key="animals">
            {list3.map((item) => {
              return (
                <div className="coupon_item" key={item.id}>
                  <div className="coupon_price">
                    <div className="coupon_left">
                      <p className="coupon_money">
                        &yen;<span>{item.money}</span>
                      </p>
                      <p className="coupon_limit">满{item.limit_money}可用</p>
                    </div>
                    <div className="coupon_right">
                      <p className="coupon_title">{item.title}</p>
                      <p className="coupon_time">
                        {getTime(item.begintime)}至
                        {getTime(item.endtime)}
                      </p>
                    </div>
                  </div>
                  <div className="coupon_line"></div>
                  <p className="coupon_text">使用规则：{item.description}</p>
                </div>
              );
            })}
          </Tabs.Tab>
        </Tabs>
      </>
    );
  }
}
const mapStateToProps = (state) => {
  return {
      list1:getList1(state),
      list2:getList2(state),
      list3:getList3(state)
  };
};
const mapDispatchToProps = (dispatch) => {
  return {
      coupon:bindActionCreators(actions,dispatch)
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(Coupon);
